我們在DAY 1建立的網站,大家應該還有印象。
我們今天來看一下這個頁面是怎麼產生的吧~
在這之前,先補充一些使用VSCODE的小訣竅。
先開啟VSCODE,並開啟我們的專案,你可以選擇以下三種方案:
從[VSCODE]->[檔案]->[開啟資料夾],然後選你的Angular專案即可。
蛤,你說我的VSCODE為什麼是中文?在VSCODE左邊欄選第五個圖示,搜尋Chinese
,就可以找到中文的語言包並安裝囉~
在[專案資料夾] -> [右鍵] -> [Open with Code]
在專案資料夾開啟Command Line,輸入:
code .
按住Shift + 滑鼠右鍵也會出現選項讓你快速開啟Command Line唷~
進到VSCODE後,按快捷鍵:
Ctrl + `
開啟 Terminal ,也就是 Command Line 。「 ` 」 這個鍵通常在鍵盤的 ESC 下方。
接著你應該就可以在 VSCODE 下方輸入 command 了。
先下指令開啟測試伺服器以及瀏覽器:
ng serve -o
在瀏覽器按F12或 [右鍵] -> [檢查] ,就可以開啟開發人員模式。
首頁,也就是現在這個頁面,會顯示 index.html
的內容。從開發人員模式可以看出來,能顯示在瀏覽器的內容放在 <body></body>
標籤裡,裡面有一個 app-root
的標籤和一些匯入js的標籤,其中 app-root
就是我們的內容來源:
那我們一步步來看 app-root 是怎麼產生的吧。
我們之前在 angular.json
中看過的:
"index": "src/index.html"
"main": "src/main.ts"
分別定義了首頁和程式進入點,若之前有學過 C 、 JAVA 之類的程式語言,對於 main function 應該不陌生,像這樣:
int main() {
...
return 0;
}
那麼現在 main.ts 這個檔案就是取代了 main function 的角色。
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));
typescript 是腳本語言,與 javascript 、 python 類似,都是逐行執行程式碼。我們看看這個檔案做了甚麼事:
ng build --prod
這個命令時, environment.ts
會被置換成environment.prod.ts
,使得這邊的environment.prodution
從False被換成True,才會執行enableProdMode()
這個function。platformBrowserDynamic()
產生一個 platform 的實體,然後用 bootstrapModule()
載入 AppModule
這個模組,後面串接 .catch(err => console.error(err))
是把錯誤訊息導向console。AppModule
,我們繼續往下。按Crtl +滑鼠左鍵點一下 AppModule
,就可以切換到 app.module.ts
。
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
由第6行的 @NgModule
可以知道 AppModule
這個class被標註成NgModule,@NgModule
是一個Decorator,之後會詳細介紹有關於Decorator以及NgModule的每個欄位。我們先專注在如何產生頁面:
AppComponent
。AppComponent
會被插入到index.html中。所以關鍵角色是 AppComponent
,一個 Component 會有四個檔案:
app.component.css
app.component.html
<h1>
Welcome to {{ title }}!
</h1>
這邊用了 {{ ... }}
這個語法,是Angular 的 data binding 語法中的 Interpolation,中文譯作插值,data binding 還有其他語法,之後逐一介紹。{{ ... }}
裡 title 的值,會定義在 app.component.ts
中,由 Angular 將他們綁定。在執行期時,把title的內容送到 app.component.html
,因此就會看到Welcome to Sponge-Website! ,而不是Welcome to {{ title }}!。
app.component.ts
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Sponge-Website';
}
我們又見到了 Decorator , 這次是 @Component
,同樣也是宣告這個 class 為 Component ,注意到第 7 行的 title 就是被送到 html 的內容。我們看一下 Component 要定義哪些東西:
<app-root></app-root>
這個標籤,來顯示這個 Component。index.html
的標籤對應上,可以實驗看看。templateUrl: '<h1> Hello world </h1>'
styleUrls
該 Component 用到的 css ,是一個陣列,也就是可以放多個 css 檔。
app.component.spec.ts
用於單元測試的檔案,稍微看一下裡面其中一段程式碼:
這邊有一些測試腳本的範例,像這段就是檢查頁面標題是不是和Sponge-Website
一致,先有初步認識即可。
最後透過 export class AppComponent { ... }
將這個 Component 匯出。
所以在經過 AppComponent 、 AppModule 這樣一層一層的傳遞,我們終於可以在 index.html 顯示我們的 Component 了,12行的<app-root></app-root>
就是我們剛剛 AppComponent 所定義的 selector 。
程式進入點main.ts
->載入 AppModule
-> 載入AppComponent
-> 把 AppComponent
用<app-root></app-root>
標籤放進 index.html
->大功告成!
我們明天來講一下html,預計以index.html
和app.component.html
為範例。
有關 platformBrowserDynamic 的參考資料:
https://medium.com/learnwithrahul/ways-of-bootstrapping-angular-applications-d379f594f604